<template>
  <div :style="'height:' + height + 'px'" class="audioInfo">
    <div class="audio" :style="'background-image:url('+ infoData.photo +')'">
      <img
        @click="play"
        v-if="playIconShow"
        class="playIcon"
        src="@as/img/xuexi_bofang_icon@2x.png"
        alt
      />
      <!-- <img src="@as/img/xuexi_zanting_icon@2x.png" alt=""> -->
      <!-- <audio-player  class="audio-player-box"
    ref="audioPlayer"
    :options="playerOptions"
    :playsinline="true"
    customEventName="customstatechangedeventname"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @statechanged="playerStateChanged($event)"
    @ready="playerReadied"
    @timeupdate="onPlayerTimeupdate($event)">
      </audio-player>-->
      <audio
        :style="'opacity:' + (playIconShow?0:1)"
        ref="audio"
        @play="onPlayerPlay"
        @pause="onPlayerPause"
        @ended="onPlayerEnded"
        :src="audioSrc"
        controls="controls"
      ></audio>
    </div>
    <div class="bar">
      <div class="text">
        <p class="title">{{play_title}}</p>
        <p class="time">{{infoData.people_num}}人学过 | 时长：{{play_time|conversionToMinute}}</p>
      </div>
      <div class="icon" @click="subscribe" v-if="!shareIos">
        <i
          v-show="!infoData.is_subscribe"
          class="iconfont iconxuexi_icon_dingyue"
          style="color:#999;font-size:18px;"
        ></i>
        <i
          v-show="infoData.is_subscribe"
          class="iconfont iconxuexi_icon_yidingyue1"
          style="color:#DD4D44;font-size:18px;"
        ></i>
      </div>
    </div>
    <div class="content">
      <ul class="nav">
        <li @click="navActive=0" :class="navActive==0?'active':''">目录</li>
        <li @click="navActive=1" :class="navActive==1?'active':''">课程详情</li>
      </ul>
      <div v-show="navActive==0" class="title">
        <img src="@as/img/xuexi_zhangjie_icon@2x.png" alt />
        <span>{{infoData.title}}</span>
      </div>
      <ul v-show="navActive==0" class="c_list">
        <li @click="playList(item,index)" v-for="(item,index) in infoData.chapters" :key="index">
          <i
            v-show="playingIndex==index"
            class="iconfont iconxuexi_icon_jindu1"
            style="color:#EB4D44;font-size:13px;position:absolute;left:-21px;top:20px;"
          ></i>
          <div class="text">
            <div class="name">{{item.title}}</div>
            <div class="time">{{item.audio_duration|conversionToMinute}}</div>
          </div>
          <div
            :class="item.is_complete==1?'state':'state unRead'"
          >{{item.is_complete==1?'已完成':'未完成'}}</div>
        </li>
      </ul>
      <div v-show="navActive==1" class="info" v-html="infoData.content"></div>
    </div>
    <div v-show="!noteWriteShow" class="note">
      <div class="inputView" @click="noteWriteShow=true">记录一下现在的想法</div>
    </div>
    <div v-show="noteWriteShow" class="mask" @click="noteWriteShow=false"></div>
    <div v-show="noteWriteShow" class="noteWrite">
      <textarea
        v-model="noteValue"
        @blur="textareaBlur"
        autofocus
        placeholder="记录一下现在的想法"
        name
        id
        cols="30"
        rows="10"
      ></textarea>
      <div class="btnBar">
        <div class="check">
          <mu-checkbox
            color="#EB4D44"
            uncheck-icon=":iconxuexi_pinglun_gongbu iconfont"
            checked-icon=":iconxuexi_pinglun_gongbu iconfont"
            v-model="checkbox"
            :label="checkbox?'公开':'私密'"
          ></mu-checkbox>
        </div>
        <div class="btn" @click="sendNote">发 布</div>
      </div>
    </div>
    <share :shareData="shareData" v-if="shareIos" :bgColor="bgColor" style="margin-top: 360px" />
  </div>
</template>

<script>
import share from "@views/home/components/share";
export default {
  //广告
  components: {
    share
  },
  //广告
  data() {
    return {
      //广告
      shareData: [],
      bgColor: {
        swiperColor: "#fff",
        codeColor: "#fff"
      },
      shareIos: false,
      isAndroid: false,
      orgnation_id: "",
      isIOS: false,
      organization_id:'',
      //广告
      playIconShow: true,
      playTimeInterval: null,
      playingIndex: 0,
      id: null,
      type: "",
      infoData: {
        photo: "",
        is_subscribe: 0,
        title: "",
        people_num: 0
      },
      play_time: 0,
      play_title: "",
      noteWriteShow: false,
      checkbox: true,
      noteValue: "",
      navActive: 0,
      audioSrc: "",
      chapters_id: null,
      task_id: null,
      task_course_id: null,
      height:'',
    };
  },
  created() {
    //广告
    if (this.$route.query.fromIos) {
      this.shareIos = true;
      this.organization_id = this.$route.query.organization_id;
      this.phone = this.$route.query.phone;
      this.name = this.$route.query.name;
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
    }
    //广告
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
    }
    if (this.$route.query.chapters_id) {
      this.chapters_id = this.$route.query.chapters_id;
      this.task_id = this.$route.query.task_id;
      this.task_course_id = this.$route.query.task_course_id;
    }
    this.getInfo();
    this.height = window.innerHeight;
    //微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
    window.addEventListener("resize", function() {
      if (
        document.activeElement.tagName == "INPUT" ||
        document.activeElement.tagName == "TEXTAREA"
      ) {
        window.setTimeout(function() {
          document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
      }
    });
  },
  beforeDestroy() {
    clearInterval(this.playTimeInterval);
    this.study_log();
  },
  mounted() {
    //广告
    var u = navigator.userAgent,
      app = navigator.appVersion;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      //这个是安卓操作系统
      this.isAndroid = true;
      this.isIos = false;
      if (this.shareIos) {
        this.getAdShare(6);
      }
    }
    if (isIOS) {
      this.isAndroid = false;
      this.isIos = true;
      if (this.shareIos) {
        this.getAdShare(5);
      }
    }
    //广告
  },
  methods: {
    //广告
    getAdShare(id) {
      this.$http
        .get("app/My/add_list", {
          org_id: this.organization_id,
          position: id
        })
        .then(res => {
          if (res.code == 200) {
            if (res.data.length > 0) {
              this.shareData = res.data;
            } else {
              this.shareData = [
                {
                  photo:
                    "https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg",
                  link: "https://apps.apple.com/cn/app/id1434639733",
                  remarks: "中纺机党建云"
                }
              ];
            }
          }
        });
    },
    //广告
    play() {
      this.$refs.audio.play();
    },
    async getInfo() {
      try {
        let params = {
          id: this.id,
          // id: 4,
          type: this.type,
          // type: 1,
          phone: Cookies.get("user_71ydj")
            ? JSON.parse(window.Cookies.get("user_71ydj")).phone
            : this.phone
        };
        const url = `applets/StudyInfo/audio_info`;
        let res = await this.$http.get(url, params);
        this.$progress.done();
        if (res.code === 200) {
          this.infoData = res.data;
          this.play_title = res.data.chapters[0].title;
          this.play_time = res.data.chapters[0].audio_duration;
          this.audioSrc = res.data.chapters[0].audio_address;
          for (let i = 0; i < this.infoData.chapters.length; i++) {
            const e = this.infoData.chapters[i];

            if (e.id == this.chapters_id) {
              console.log(e);
              this.playingIndex = i;
              this.audioSrc = e.audio_address;
              this.play_title = e.title;
              this.play_time = e.audio_duration;
              this.infoData.poster = e.cover_map;
              // setTimeout(
              //   function() {
              //     this.playvedio();
              //   }.bind(this),
              //   200
              // );
            }
            e.timeUsed = 0;
            e.state = 2;
          }
        } else {
          this.$toast.error(res.msg);
        }
      } catch (e) {
        console.log("error:", e);
      }
    },
    subscribe() {
      let params = {
        course_id: this.id,
        type: this.type,
        phone: Cookies.get("user_71ydj")
          ? JSON.parse(window.Cookies.get("user_71ydj")).phone
          : this.phone,
        status: 2
      };
      const url = `applets/Study/course_subscribe`;
      this.$http.post(url, params).then(res => {
        if (res.code === 200) {
          if (this.infoData.is_subscribe == 0) {
            this.$toast.success("订阅成功！");
            this.infoData.is_subscribe = 1;
          } else {
            this.$toast.success("取消成功！");
            this.infoData.is_subscribe = 0;
          }
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    playList(item, index) {
      this.audioSrc = item.audio_address;
      this.infoData.poster = item.cover_map;
      this.play_time = item.audio_duration;
      this.play_title = item.title;
      this.playingIndex = index;
    },
    textareaBlur() {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    sendNote() {
      if (!this.noteValue) {
        return;
      }
      this.noteWriteShow = false;
      let params = {
        phone: Cookies.get("user_71ydj")
          ? JSON.parse(window.Cookies.get("user_71ydj")).phone
          : this.phone,
        course_id: this.id,
        type: this.type,
        status: 2,
        state: this.checkbox ? 1 : 2,
        content: this.noteValue,
        org_id: Cookies.get("user_71ydj")
          ? JSON.parse(window.Cookies.get("user_71ydj")).organization_id
          : this.organization_id
      };
      const url = `applets/My/add_note`;
      this.$http.post(url, params).then(res => {
        if (res.code === 200) {
          this.$toast.success("发布成功！");
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    // listen event
    onPlayerPlay(player) {
      this.playIconShow = false;
      // console.log('player play!', player)
      clearInterval(this.playTimeInterval);
      this.playTimeInterval = setInterval(() => {
        this.infoData.chapters[this.playingIndex].timeUsed++;
        console.log(this.infoData.chapters[this.playingIndex].timeUsed);
      }, 1000);
    },
    onPlayerPause(player) {
      console.log("player pause!", player);
      clearInterval(this.playTimeInterval);
    },
    onPlayerEnded(player) {
      this.playIconShow = true;
      this.infoData.chapters[this.playingIndex].state = 1;
      this.infoData.chapters[this.playingIndex].is_complete = 1;
      if (this.infoData.chapters[this.playingIndex].id == this.chapters_id) {
        let params = {
          uid: Cookies.get("user_71ydj")
            ? JSON.parse(window.Cookies.get("user_71ydj")).id
            : "",
          task_id: this.task_id,
          task_course_id: this.task_course_id
        };
        const url = `applets/StudyPlay/record_learn`;
        this.$http.post(url, params).then(res => {
          if (res.code === 200) {
          } else {
            this.$toast.error(res.msg);
          }
        });
      }
    },
    study_log() {
      for (let i = 0; i < this.infoData.chapters.length; i++) {
        const e = this.infoData.chapters[i];
        if (e.timeUsed) {
          let params = {
            phone: Cookies.get("user_71ydj")
              ? JSON.parse(window.Cookies.get("user_71ydj")).phone
              : this.phone,
            status: 2,
            course_id: this.id,
            chapter_id: e.id,
            type: e.type,
            learn_duration: e.timeUsed,
            state: e.state
          };
          const url = `applets/StudyPlay/study_log`;
          this.$http.post(url, params).then(res => {
            if (res.code === 200) {
            } else {
              this.$toast.error(res.msg);
            }
          });
        }
      }
    }
  }
};
</script>
<style>
.audioInfo .mu-checkbox-label {
  color: rgba(153, 153, 153, 1);
}
.audioInfo .mu-checkbox-icon {
  margin-right: 0;
}
</style>

<style lang="scss" scoped>
.audioInfo {
  position: relative;
  top: 0;
  left: 0;
  box-sizing: border-box;
  .audio {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 219px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .playIcon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 26px;
      height: 34px;
    }
    audio {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
  > .bar {
    width: 100%;
    height: 70px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 3px 3px 10px 0px rgba(51, 51, 51, 0.08);
    display: flex;
    box-sizing: border-box;
    padding: 20px 22px 15px 16px;
    justify-content: space-between;
    align-items: flex-start;
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        width: 280px;
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 10px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        font-size: 12px;
        line-height: 12px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .icon {
      display: flex;
      align-content: flex-start;
    }
  }
  > .content {
    overflow: scroll;
    width: 100%;
    // position: absolute;
    // top: 219px;
    height: calc(100% - 337px);
    > .nav {
      box-sizing: border-box;
      width: 100%;
      padding: 15px 16px;
      margin-bottom: 5px;
      li {
        transition: all 0.1s linear;
        display: inline-block;
        font-size: 13px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(102, 102, 102, 0.6);
        margin-right: 25px;
        &.active {
          position: relative;
          font-size: 15px;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -8px;
            width: 80%;
            height: 3px;
            background: linear-gradient(
              90deg,
              rgba(235, 77, 68, 1) 0%,
              rgba(244, 117, 72, 1) 100%
            );
            border-radius: 2px;
          }
        }
      }
    }
    > .title {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;
      img {
        width: 25px;
        height: 17px;
        margin-right: 10px;
      }
      span {
        font-size: 15px;
        font-family: PingFang-SC-Medium;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    > .c_list {
      box-sizing: border-box;
      width: 100%;
      padding: 0 17px 0 46px;
      li {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 20px 17px 7px 6px;
        border-bottom: 1px solid #cccccc;
        .text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            width: 245px;
            font-size: 14px;
            line-height: 14px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .time {
            font-size: 11px;
            line-height: 11px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
          }
        }
        .state {
          font-size: 12px;
          line-height: 12px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .state.unRead {
          color: #fd7304;
        }
      }
    }
    > .info {
      box-sizing: border-box;
      padding: 0 18px;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
    }
  }
  > .note {
    background-color: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 45px;
    border-top: 1px solid rgba(239, 239, 239, 1);
    .inputView {
      width: 343px;
      height: 30px;
      line-height: 30px;
      background: rgba(249, 249, 249, 1);
      border-radius: 3px;
      margin: 7px auto;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      padding-left: 10px;
    }
  }
  > .mask {
    position: absolute;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  > .noteWrite {
    position: absolute;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 240px;
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
    box-sizing: border-box;
    padding: 20px 16px 0;
    textarea {
      display: block;
      box-sizing: border-box;
      padding: 15px 10px;
      width: 343px;
      height: 170px;
      background: rgba(249, 249, 249, 1);
      border-radius: 3px;
      border: 0;
      outline: none;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      margin-bottom: 10px;
    }
    .btnBar {
      display: flex;
      height: 30px;
      justify-content: space-between;
      font-size: 12px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      align-items: center;
      .check {
      }
      .btn {
        width: 80px;
        height: 30px;
        background: rgba(235, 77, 68, 1);
        border-radius: 3px;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
    }
  }
}
</style>

